{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            审核
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'backend:statistic' %}"><i class="fa fa-dashboard"></i>统计</a></li>
            <li class="active">审核</li>
        </ol>
    </section>

    <section class="content">
        <div id="devlist">
            <div class="box box-primary" id="liebiao">
                <div class="box-header">
                    <div class="btn-group pull-left">
                        <button type="button" id="btnRefresh" class="btn btn-default">
                            <i class="glyphicon glyphicon-repeat"></i>刷新
                        </button>
                    </div>

                </div>

                <div class="box-body">
                    <div class="btn-group pull-right">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <label>搜索：</label>
                                <input placeholder="请输入账户名称" id="searchTitle" class="form-control" type="text"/>
                                <button class="btn btn-default" id="Search">搜索</button>
                            </div>
                        </form>
                    </div>

                    <table id="dtbList" class="display" cellspacing="0" width="100%">
                        <thead>
                        <tr valign="middle">
                            <th>ID</th>
                            <th>账户名称</th>
                            <th>所属用户</th>
                            <th>账户类型</th>
                            <th>审核时间</th>
                            <th>过期时间</th>
                            <th>剩余使用天数</th>
                            <th>审核状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <br> <br>
                </div>
            </div>
        </div>
    </section>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        var table = $('#dtbList').DataTable({
                searching: false,
                serverSide: true, // 打开服务器模式
                Processing: true,  // 开启加载提示
                bPaginate: true,  // 翻页
                bLengthChange: true,  // 改变每页显示数据数量
                bFilter: true,    //过滤功能
                bSort: false, // 排序功能
                sPaginationType: "full_numbers",
                ajax: function (data, callback, settings) {
                    // 封装请求参数
                    var account_name = $('#searchTitle').val().trim();

                    var pagesize = data.length; // 显示的记录条数
                    var start = data.start; // 开始的记录序号
                    var page = start / pagesize + 1; // 当前页码

                    var url = ["{% url 'backend:audit-list' %}" + '?account_name=' + account_name + '&pagesize=' + pagesize + '&page=' + page];

                    $.ajax({
                        url: url,
                        type: 'get',
                        cache: false,
                        success: function (resp) {
                            callback(resp);
                        }
                    })
                },
                columns: [
                    {'data': 'id'},
                    {'data': 'name'},
                    {'data': 'user'},
                    {'data': 'type'},
                    {'data': 'apply_time'},
                    {'data': 'expire_time'},
                    {
                        'data': 'last_day',
                        render: function (data, type, row, meta) {
                            if (data === 0) {
                                data = "<span class='label label-primary' style='background-color:#f39c12 !important;'>" + data + "天</span>";
                            } else if (data < 0) {
                                data = "<span class='label label-primary' style='background-color:#FF5722 !important;'>过期" + Math.abs(data) + "天</span>";
                            } else {
                                data = "<span class='label label-primary' style='background-color:#00a65a !important;'>" + data + "天</span>";
                            }

                            return data
                        }
                    },
                    {
                        'data': 'status',
                        render: function (data, type, row, meta) {
                            if (data === "已审核") {
                                data = "<span class='label label-primary' style='background-color:#00a65a !important;'>" + data + "</span>";
                            } else if (data === "待审核") {
                                data = "<span class='label label-primary' style='background-color:#f39c12 !important;'>" + data + "</span>";
                            } else {
                                data = "<span class='label label-primary' style='background-color:#FF5722 !important;'>" + data + "</span>";
                            }

                            return data
                        }
                    },
                    {
                        'data': "id",
                        'width': "12%",
                        'bSortable': "false",
                        render: function (data, type, row, meta) {
                            var ret = "";
                            ret = ret + "<button name='btnChangepasswd' title='审核' class='btn btn-sm btn-primary' onclick='doAudit("
                                + data + ", " + JSON.stringify(row) + ")'>审核</button>";
                            ret = ret + "<button name='btnConfig' title='拒绝审核' class='btn btn-sm btn-danger' style='margin-left:8px;' onclick='doRefuse("
                                + data + ", " + JSON.stringify(row) + ")'>拒绝审核</button>";
                            return ret;
                        }
                    }

                ],
                // 国际化
                language: {
                    "sProcessing":
                        "处理中...",
                    "sLengthMenu":
                        "显示 _MENU_ 项结果",
                    "sZeroRecords":
                        "没有匹配结果",
                    "sInfo":
                        "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty":
                        "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered":
                        "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix":
                        "",
                    "sSearch":
                        "搜索:",
                    "sUrl":
                        "",
                    "sEmptyTable":
                        "表中数据为空",
                    "sLoadingRecords":
                        "载入中...",
                    "sInfoThousands":
                        ",",
                    "oPaginate":
                        {
                            "sFirst":
                                "首页",
                            "sPrevious":
                                "上页",
                            "sNext":
                                "下页",
                            "sLast":
                                "末页"
                        }
                    ,
                    "oAria":
                        {
                            "sSortAscending":
                                ": 以升序排列此列",
                            "sSortDescending":
                                ": 以降序排列此列"
                        }
                }
            })
        ;

        // 根据 Mac 地址过滤
        $('#Search').click(function () {
            table.ajax.reload();
        });

        // 审核
        function doAudit(d, row) {
            if (row['status'] === '已审核') {
                layer.alert('已审核，不能重复审核', {icon: 7});
                return false;
            }
            layer.confirm('确定审核？', {
                icon: 3,
                title: '提示',
            }, function (index) {
                $.ajax({
                    type: 'get',
                    url: ['{% url 'backend:audit-account' %}' + '?id=' + d],
                    cache: false,
                    success: function (resp) {
                        if (resp) {
                            layer.alert('审核成功', {icon: 1}, function (index) {
                                parent.layer.closeAll();    // 关闭所有弹窗
                                table.ajax.reload();
                            })
                        } else {
                            layer.alert('审核失败', {icon: 5});
                        }
                    }
                });
            });
        }

        // 拒绝审核
        function doRefuse(d, row) {
            if (row['status'] === '已审核') {
                layer.alert('已审核，不能拒绝审核', {icon: 7});
                return false;
            }

            layer.confirm('确定拒绝审核？', {
                icon: 3,
                title: '提示',
            }, function (index) {
                $.ajax({
                    type: 'get',
                    url: ['{% url 'backend:audit-account' %}' + '?id=' + d + '&flag=refuse'],
                    cache: false,
                    success: function (resp) {
                        if (resp) {
                            layer.alert('操作成功', {icon: 1}, function (index) {
                                parent.layer.closeAll();    // 关闭所有弹窗
                                table.ajax.reload();
                            })
                        } else {
                            layer.alert('操作失败', {icon: 5});
                        }
                    }
                });
            });
        }

        // 刷新
        $('#btnRefresh').click(function () {
            table.ajax.reload();
        })
    </script>
{% endblock %}
